import React from 'react';

import { QqOutlined, WechatOutlined, WhatsAppOutlined, QrcodeOutlined, SearchOutlined, PlaySquareOutlined, LinkOutlined } from '@ant-design/icons';

import { Tabs, Form, Input, Button, Modal, Row, Col, Radio, Select, Table, Tag, Switch, message } from 'antd';
import { FormInstance } from 'antd/lib/form';

import './index.less';

import FooterBar from './component/footer-bar';

const { Option, OptGroup } = Select;

const { TabPane } = Tabs;

export default class Message extends React.Component{
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px'}}>
				<Tabs defaultActiveKey="1" onChange={() => {}}>
					<TabPane tab="新闻媒体资源" key="1">
						<NewMedia/>
					</TabPane>
					<TabPane tab="自媒体资源" key="2">
						<SelfMedia/>
					</TabPane>
				</Tabs>
				<FooterBar/>
			</div>
		)
	}
}

class CheckPriceModal extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(): React.ReactNode {
		const {visible} = this.props;
		return (<>
			<Modal title="提示" okText={'提交反馈'} visible={visible} onOk={() => this.props.handelCancel()} onCancel={() => this.props.handelCancel()}>
				<Form ref={this.formRef} labelCol={{ span: 5 }} wrapperCol={{ span: 13 }}>
					<Form.Item
						name="value"
						label="媒体名称："
					>
						<span>商丘网(商丘新闻网)</span>
					</Form.Item>
					<Form.Item
						name="value"
						label="媒体价格："
					>
						<span>¥18.00</span>
					</Form.Item>
					<Form.Item
						name="value"
						label="反馈内容："
					>
						<Input.TextArea rows={2} placeholder="请输入内容" />
					</Form.Item>
				</Form>
			</Modal>
		</>)
	}
}

const LabelText = (props) => {
	return (
		<span style={{display: 'inline-block',width: '96px',textAlign: 'center',lineHeight: '32px',background: '#f3f5f6',padding: '0 20px',borderRadius: 4}}>{props.text}</span>
	)
}

const list1 = [
	'不限','中国五大门户','中央新闻门户','全国商业门户','地方重点门户','国外媒体','小站专区'
]

const list2 = [
	'不限','新浪网','搜狐网','腾讯网','网易','凤凰网','中华网','人民网','央视网','千龙网','新华网',
	'中国网','慧聪网','大众网','东方网','中国日报网','中国经济网','中国新闻网','中国广播网','和讯网',
	'北青网','光明网','环球网'
]

const list3 = [
	'不限','新闻资讯','IT数码科技','财经商业','生活消费','女性时尚','娱乐休闲','游戏动漫','汽车','酒店旅游',
	'健康医疗','房产家居','母婴亲子','体育运动','教育培训','文化艺术','食品餐饮','工业能源','贸易物流','法制舆情',
	'农业园艺','慈善公益','区块链'
]

const list4 = [
	'不限','包网页','网友收录','包新闻源','新闻源'
]

const list5 = [
	'不限','周末可出','白名单','首页推荐','移动客户端','平台推荐','收录好','低价秒杀','打包套餐','站长专区'
]

const list6 = [
	'不限','微商','加盟','医疗','留学','虚拟币','移民生子','美容护肤','P2P网贷','评论'
]

const list7 = [
	'不限','20元以下','20-30元','30-40元','40-60元','60-80元','80-100元','100元以上'
]

const list8 = [
	'不限','北京','上海','广州','深圳','杭州','成都','武汉','西安'
]

const lists1 = [
	'时间不限','小于2小时','2-6小时','6-12小时','12-24小时'
]

const lists2 = [
	'出稿率不限','30-50%','50-70%','70-100%'
]

const lists3 = [
	'入口不限','首页','列表','无入口'
]

const lists4 = [
	'文本网址','关键词链接','QQ/微信','电话','二维码'
]
 
const lists5 = [
	'周末可发','周末休息'
]

const lists6 = [
	'PC权重','p1','p2','p3','p4'
]

const lists7 = [
	'移动权重','c1','c2','c3','c4'
]

const lists8 = [
	'不限',
	'全国',
	'A 安徽',
	'B 北京',
	'C 重庆',
	'F 福建',
	'G 广东',
	'G 贵州',
	'G 甘肃',
	'G 广西',
	'G 港澳台',
	'H 河北',
	'H 黑龙江',
	'H 河南',
	'H 湖北',
	'H 湖南',
	'H 海南',
	'J 吉林',
	'J 江苏',
	'J 江西',
	'L 辽宁',
	'N 内蒙古',
	'N 宁夏',
	'Q 青海',
	'S 山西',
	'S 上海',
	'S 山东',
	'S 四川',
	'S 陕西',
	'T 天津',
	'X 西藏',
	'X 新疆',
	'Y 云南',
	'Z 浙江'
]


class SearchModel extends React.Component{
	formRef = React.createRef<FormInstance>();
	componentDidMount(){
		this.formRef.current?.setFieldsValue({
			value1: '不限',
			value2: '不限',
			value3: '不限',
			value4: '不限',
			value5: '不限',
			value6: '不限',
			value7: '不限'
		})
	}
	render() {
		return (
			<div className="setR search setRC">
				<Form ref={this.formRef}>
					<Form.Item
                        name="value1"
                        colon={false}
                        label={<LabelText text="门户类型"/>}
                    >
                        <Radio.Group buttonStyle="solid" >
                        	{
                        		list1.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                        	}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value2"
                        colon={false}
                        label={<LabelText text="知名媒体"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			list2.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value3"
                        colon={false}
                        label={<LabelText text="内容类型"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			list3.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value4"
                        colon={false}
                        label={<LabelText text="收录效果"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			list4.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value5"
                        colon={false}
                        label={<LabelText text="媒体标签"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			list5.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value6"
                        colon={false}
                        label={<LabelText text="特殊稿件"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			list6.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value7"
                        colon={false}
                        label={<LabelText text="发布费用"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			list7.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Row gutter={16} style={{marginBottom: 8}}>
                    	<Col span={6}> 
                    		<Form.Item
		                        name="value9"
		                        colon={false}
		                        label={<LabelText text="区域媒体"/>}
		                    >
		                    	<Select showSearch placeholder="请选择" style={{width: '100%'}}  filterOption={(input, option) => option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
		                    		{
		                    			lists8.map(item => (
		                    				<Option value={item} key={item}>{item}</Option>
		                    			))
		                    		}
		                    	</Select>
		                    	
		                    </Form.Item>
                    	</Col>
                    	<Col span={6}> 
                    		<Form.Item
		                        name="value10"
		                        colon={false}
		                        label={<LabelText text="可带信息"/>}
		                    >
		                    	<Select showSearch placeholder="可带信息" style={{width: '100%'}} filterOption={(input, option) => option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
		                    		<Option value="0">不限</Option>
		                    		<Option value="1">文本网址</Option>
		                    		<Option value="2">关键词链接</Option>
		                    		<Option value="3">QQ/微信</Option>
		                    		<Option value="4">电话</Option>
		                    		<Option value="5">二维码</Option>
		                    		<Option value="6">视频</Option>
		                    	</Select>
		                    	
		                    </Form.Item>
                    	</Col>
                    </Row>
                    <Row gutter={16} style={{marginBottom: 12}}>
                    	<Col span={6}> 
                    		<Form.Item
		                        name="value9"
		                        colon={false}
		                        label={<LabelText text="媒体查找"/>}
		                    >
		                    	<Input placeholder="支持媒体名称、网址、备注模糊搜索" />
		                    </Form.Item>
                    	</Col>
                    	<Col span={18}> 
                    		<Form.Item>
	                    		<Switch checkedChildren="以开启" unCheckedChildren="搜备注"  />
	                    		<Button style={{marginLeft: 10}} type="primary" icon={<SearchOutlined />}>我搜</Button>
								<Button style={{marginLeft: 20}} >导出资源</Button>
                    		</Form.Item>
                    	</Col>
                    </Row>
				</Form>
			</div>
		)
	}
}

function getColumns(){
	return [
		{
			title: '媒体信息',
			dataIndex: 'user',
			key: 'user',
			width: 290,
			render: (_,item) => {
				return (
					<Row>
						<Col span={10} style={{paddingTop: '5px'}}>
							<img width="100" src="https://pic.wangmei360.com/res/logo/x2736.png" />
						</Col>
						<Col span={14}>
							<p style={{margin: 0}}>
								<a style={{color: '#333'}}>新浪网-四川首发</a>
								<a>[案例]</a>
							</p>
							<div style={{color: '#999'}}>中国五大门户</div>
						</Col>
					</Row>
				)
			}
		},
		{
			title: '价格',
			dataIndex: 'price',
			key: 'price',
			width: 100,
			sorter: {
			  compare: (a, b) => a.price - b.price,
			  multiple: 3,
			},
			render: (_,item) => {
				return '¥' + _;
			}
		},
		{
			title: '媒体详情',
			dataIndex: 'media',
			width: 180,
			key: 'media',
			render: (_,item) => {
				return (
					<>
						<div>收录效果：<strong>新闻源收录</strong></div>
						<div>频道类型：新闻资讯</div>
						<div>所属地区：S 四川</div>
					</>
				)
			}
		},
		{
			title: '截稿时间',
			dataIndex: 'time',
			key: 'time',
			width: 150,
			render: (_,item) => {
				return (
					<>
						<div>
							<Tag>周末休息</Tag>
						</div>
						{/* <div style={{marginTop: 5}}>截稿时间：18:00</div> */}
						<div style={{marginTop: 5}}>18:00</div>
					</>
				)
			}
		},
		{
			title: '出稿效率',
			dataIndex: 'effectiveness',
			key: 'effectiveness',
			width: 140,
			render: (_,item) => {
				return (
					<>
						<div>出稿时间：当天</div>
						<div style={{marginTop: 5}}>出稿率：15%</div>
					</>
				)
			}
		},
		{
			title: '百度权重',
			dataIndex: 'baidu',
			key: 'baidu',
			width: 110,
			sorter: {
			  compare: (a, b) => a.baidu - b.baidu,
			  multiple: 3,
			},
			render: (_,item) => {
				return (
					<>
						<div><img width="45" src="https://cdn.wangmei360.com/res/weight/4.gif" /></div>
						<div style={{marginTop: 5}}><img width="45" src="https://cdn.wangmei360.com/res/weight/4.gif" /></div>
					</>
				)
			}
		},
		{
			title: '可带信息',
			dataIndex: 'info',
			key: 'info',
			width: 100,
			render: (_,item) => {
				return (
					<>
						<div style={{fontSize: '17px'}}><QqOutlined /> <WechatOutlined /> <LinkOutlined/></div>
						<div style={{marginTop: 5,fontSize: '17px'}}><WhatsAppOutlined /> <QrcodeOutlined /> <PlaySquareOutlined/> </div>
	
					</>  
	
				)
			}
		},
		{
			title: 'DH指数',
			dataIndex: 'number',
			width: 100,
			key: 'number'
		},
		{
			title: '备注',
			dataIndex: 'remark',
			key: 'remark'
		},
		{
			title: '操作',
			dataIndex: 'option',
			width: 180,
			key: 'option',
			render: () => {
				return (
					<>
						<div style={{textAlign: 'center'}}>
							<Button type="primary" onClick={() => message.success('🎉 🎉 🎉  添加成功！')} >
								添加发布
							</Button>
						</div>
						<div style={{marginTop: 5}}>
							<Button type="link" size="small" onClick={() => this.handelCheckPriceClick()}>
								检价
							</Button>
							<Button type="link" size="small" onClick={() => message.success('🎉 🎉 🎉  收藏成功！')}>
								  收藏
							</Button>
							<Button type="link" size="small" onClick={() => message.success('🎉 🎉 🎉  拉黑成功！')}>
								  拉黑
							</Button>
						</div>
					</>
				)
			}
		}
	]
}




let tableData = []

for(let i=0;i<100;i++){
	tableData.push({
		user: '中国投资网',
		price: '188',
		media: '新闻源，新闻资讯，全国',
		time: '周末可发 18：00',
		effectiveness: '出稿时间：3小时 出稿率：80%',
		baidu: 'P1，C2',
		info: '腾讯，微博',
		number: '1000',
		remark: '直编秒出，新闻源收录稳定，可带联系方式 只限正规',
		key: i
	})
}

class NewMedia extends React.Component{
	formRef = React.createRef<FormInstance>();
	state = {
		selectedRowKeys: [],
		isModalVisible: false
	}
	onSelectChange = (row) => {
		this.setState({selectedRowKeys: row})
	}
	handelCheckPriceClick = () => {
		this.setState({isModalVisible: true})
	}
	render() {
		const { selectedRowKeys,isModalVisible } = this.state;
		const columns = getColumns.bind(this)();
		const rowSelection = {
	      selectedRowKeys,
	      onChange: this.onSelectChange,
	    };
		return (
			<div>
				<SearchModel/>
				
				<div>
					<Table scroll={{ x: 1596 }} rowSelection={rowSelection} columns={columns} dataSource={tableData} />
				</div>
				<CheckPriceModal visible={isModalVisible} handelCancel={() => {this.setState({isModalVisible: false})}} />
				 
			</div>
		)
	}
}

// <div style={{padding: '10px 10px 30px',height: '72px'}}>
// 	<div style={{float: 'right'}}>
// 		<Form ref={this.formRef} layout="inline">
// 			<Form.Item
//                 name="value"
//             >
//             	<Input placeholder="搜索你想要的资源" />
//             </Form.Item>
//             <Form.Item>
//             	<Button type="primary">
//                         查询
//                     </Button>
//             </Form.Item>
// 		</Form>
// 	</div>
// </div>

const listm1 = [
	'不限','搜狐','腾讯','网易','新浪','凤凰网','今日头条','百家号','熊掌号','爱奇艺','艾瑞网',
	'北京时间','东方头条','豆瓣','东方财富','简书','金色财经','中国焦点网','快传号','驴妈妈旅游',
	'马蜂窝','汽车之家','趣头条', '汽车头条', '太平洋汽车行家', '去哪儿', '人民号', '途牛', '天涯', '同花顺',
	 'UC头条', '小红书', '雪球', '易车号', '一点资讯', '知乎', '中金在线', '携程', '其他'
]
const listm2 = [
	'不限', '财经', '动漫', '房产家居', '公益', '健康', '教育', '科技', '历史', '旅游', '美食', '母婴', '汽车',
	 '三农', '社会', '时尚', '体育', '文化', '游戏', '娱乐', '生活', '综合'
]
const listm3 = [
	'不限','周末可出', '可发视频', '官方号', '移动客户端', '平台推荐', '低价秒杀'
]
const listm4 = [
	'不限', '5000以下', '5000-1万', '1-3万', '3-5万', '5-10万', '10-20万', '20-50万', '50万以上'
]
const listm5 = [
	'不限','50以下', '50-100', '100-300', '300-500', '500-800', '800-1200', '1200-2000', '2000以上'
]
const listm6 = [
	'不限','20元以下', '20-30元', '30-40元', '40-60元', '60-80元', '80-100元', '100-150元', '150元以上'
]
class SearchmMedia extends React.Component{
	formRef = React.createRef<FormInstance>();
	render() {
		return (
			<div className="setR search setRC">
				<Form ref={this.formRef}>
					<Form.Item
                        name="value1"
                        colon={false}
                        label={<LabelText text="所属平台"/>}
                    >
                        <Radio.Group buttonStyle="solid">
                        	{
                        		listm1.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                        	}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value2"
                        colon={false}
                        label={<LabelText text="知名媒体"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			listm2.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value3"
                        colon={false}
                        label={<LabelText text="内容类型"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			listm3.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value4"
                        colon={false}
                        label={<LabelText text="收录效果"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			listm4.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value5"
                        colon={false}
                        label={<LabelText text="媒体标签"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			listm5.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="value6"
                        colon={false}
                        label={<LabelText text="特殊稿件"/>}
                    >
                    	<Radio.Group buttonStyle="solid">
                    		{
                    			listm6.map((item) => (
                        			<Radio.Button key={item} value={item}>{item}</Radio.Button>
                        		))
                    		}
                    	</Radio.Group>
                    </Form.Item>
                    <Row gutter={16} style={{marginBottom: 8}}>
                    	<Col span={6}> 
                    		<Form.Item
		                        name="value9"
		                        colon={false}
		                        label={<LabelText text="区域媒体"/>}
		                    >
		                    	<Select placeholder="请选择" style={{width: '100%'}}>
		                    		{
		                    			lists8.map(item => (
		                    				<Option value={item} key={item}>{item}</Option>
		                    			))
		                    		}
		                    	</Select>
		                    	
		                    </Form.Item>
                    	</Col>
                    	<Col span={6}> 
                    		<Form.Item
		                        name="value10"
		                        colon={false}
		                        label={<LabelText text="区域媒体"/>}
		                    >
		                    	<Select placeholder="可带信息" style={{width: '100%'}}>
		                    		<Option value="jack">文本网址</Option>
		                    		<Option value="jack">关键词链接</Option>
		                    		<Option value="jack">QQ/微信</Option>
		                    		<Option value="jack">电话</Option>
		                    		<Option value="jack">二维码</Option>
		                    	</Select>
		                    	
		                    </Form.Item>
                    	</Col>
                    </Row>
                    <Row gutter={16} style={{marginBottom: 12}}>
                    	<Col span={6}> 
                    		<Form.Item
		                        name="value9"
		                        colon={false}
		                        label={<LabelText text="媒体查找"/>}
		                    >
		                    	<Input placeholder="支持媒体名称、网址、备注模糊搜索" />
		                    </Form.Item>
                    	</Col>
                    	<Col span={6}> 
                    		<Form.Item>
	                    		<Switch checkedChildren="以开启" unCheckedChildren="搜备注"  />
	                    		<Button style={{marginLeft: 10}} type="primary" icon={<SearchOutlined />}>我搜</Button>
                    		</Form.Item>
                    	</Col>
                    </Row>
				</Form>
			</div>
		)
	}
}

const selfColumns = [
	{
		title: '媒体名称',
	    dataIndex: 'user',
	    key: 'user',
	    width: 250,
	    render: (_,item) => {
	    	return (
	    		<div>
	    			<span style={{marginRight:5}}>东方头条(美罗天下)</span>
	    			<Tag color="#2db7f5">暂停收稿</Tag>
	    		</div>
	    	)
	    }
	},
	{
		title: '价格',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    sorter: {
	      compare: (a, b) => a.price - b.price,
	      multiple: 3,
	    },
	    render: (_,item) => {
	    	return '￥6.00'
	    }
	},
	{
		title: '平台',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    render: (_,item) => {
	    	return 'UC头条'
	    }
	},
	{
		title: '行业',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    render: (_,item) => {
	    	return '科技'
	    }
	},
	{
		title: '出稿速度',
	    dataIndex: 'user',
	    width: 100,
	    key: 'user',
	    render: (_,item) => {
	    	return '当天'
	    }
	},
	{
		title: '出稿率',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    sorter: {
	      compare: (a, b) => a.price - b.price,
	      multiple: 3,
	    },
	    render: (_,item) => {
	    	return '80%'
	    }
	},
	{
		title: '粉丝数',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    render: (_,item) => {
	    	return '1'
	    }
	},
	{
		title: '阅读量',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    render: (_,item) => {
	    	return '1'
	    }
	},
	{
		title: '截稿时间',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    render: (_,item) => {
	    	return '22:00'
	    }
	},
	{
		title: '可带信息',
	    dataIndex: 'user',
	    key: 'user',
	    width: 100,
	    render: (_,item) => {
	    	return (
	    		<>
	    			<div style={{fontSize: '17px'}}><QqOutlined /> <WechatOutlined /> <LinkOutlined/></div>
	    			<div style={{marginTop: 5,fontSize: '17px'}}><WhatsAppOutlined /> <QrcodeOutlined /> <PlaySquareOutlined/> </div>
	    		</>
	    	)
	    }
	},
	{
		title: '备注',
	    dataIndex: 'user',
	    key: 'user',
	    render: (_,item) => {
	    	return '不带联系方式'
	    }
	},
	{
		title: '操作',
		dataIndex: 'option',
		width: 180,
		key: 'option',
		render: () => {
			return (
				<>
					<div style={{textAlign: 'center'}}>
						<Button type="primary" onClick={() => message.success('🎉 🎉 🎉  添加成功！')} >
							添加发布
						</Button>
					</div>
					<div style={{marginTop: 5}}>
						<Button type="link" size="small" onClick={() => this.handelCheckPriceClick()}>
							检价
						</Button>
						<Button type="link" size="small" onClick={() => message.success('🎉 🎉 🎉  收藏成功！')}>
							  收藏
						</Button>
						<Button type="link" size="small" onClick={() => message.success('🎉 🎉 🎉  拉黑成功！')}>
							  拉黑
						</Button>
					</div>
				</>
			)
		}
	}
];

let selfTableData = [];

for(let i=0;i<100;i++){
	selfTableData.push({
		key: i,
		sort: i
	})
}

class SelfMedia extends React.Component{
	formRef = React.createRef<FormInstance>();
	state = {
		selectedRowKeys: []
	}
	onSelectChange = () => {

	}
	render() {
		const { selectedRowKeys } = this.state;
		const rowSelection = {
	      selectedRowKeys,
	      onChange: this.onSelectChange,
	    };
		return (
			<div>
				<SearchmMedia/>
				<div>
					<Table scroll={{ x: 1596 }} rowSelection={rowSelection} columns={selfColumns} dataSource={selfTableData} />
				</div>
			</div>
		)
	}
}
